<template>
     <section class="basics-box">
            <section v-for="(item,index) in basicsData" :key="index" class="basics-item">
              <p>{{item.value}}</p>
              <div>{{item.name}}</div>
            </section>
      </section>
</template>
<script>
export default {
    props:{
        basicsData:Array
    }
}
</script>
<style scoped>
.basics-box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: #fff;
  padding: 1rem;
  justify-content: space-between;
}
.basics-item{
    min-width: 25%;
    margin-right: 0.5rem;
    margin-top: 1rem;
    background-color:#121E6E ;
    border-radius:5px;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.8rem;
    
}
/* .basics-item::after{
  content: url(../assets/分割线.png);
  display: inline-block;
  vertical-align: middle;
} */
.basics-item>p{
    color: #08FFCE;
}
.basics-item>div{
    color: #00BAFF;
}
</style>